import React, {Component} from 'react';
import axios from 'axios';
import 'antd/dist/antd.css';
// import { Input, Button, List } from 'antd';
import store from './store/index';
// import {CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './store/actionTypes';
import {getInitList, getInputChangeAction, getAddItemAction, getDeleteItemAction, getInitListAction, getTodoList} from './store/actionCreators';
import TodoListUI from './TodoListUI'
// const data = [
//   'Racing car sprays burning fuel into crowd.',
//   'Japanese princess to wed commoner.',
//   'Australian walks 100km after outback crash.',
//   'Man charged over missing wedding girl.',
//   'Los Angeles battles huge wildfires.',
// ];



class TodoList extends Component{
  constructor (props) {
    super(props);
    this.state = store.getState()
    // console.log(this.state)
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleBtnClick = this.handleBtnClick.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    this.handleItemDelete = this.handleItemDelete.bind(this)
    store.subscribe(this.handleStoreChange)
  }

  render () {
    // return(
    //   <div style={{marginTop: '10px',marginLeft:'10px'}}>
    //     <div>
    //       <Input value={this.state.inputValue} onChange={this.handleInputChange} placeholder="todo info" style={{width: '300px',marginRight: '10px'}}></Input>
    //       <Button type="primary" onClick={this.handleBtnClick}>提交</Button>
    //     </div>
    //     <List
    //       style={{marginTop:'10px',width:'500px'}}
    //       bordered
    //       dataSource={this.state.list}
    //       renderItem={(item,index) => (<List.Item onClick={this.handleItemDelete.bind(this, index)}> {item}</List.Item>)}
    //     />
    //   </div>
    // )
    return(
      <TodoListUI
        inputValue={this.state.inputValue}
        handleInputChange={this.handleInputChange}
        handleBtnClick={this.handleBtnClick}
        list={this.state.list}
        handleItemDelete={this.handleItemDelete}/>
    )
  }

  componentDidMount () {
    // redux-thunk 发送ajax请求
    // const action = getTodoList();
    // store.dispatch(action)

    const action = getInitList()
    
    store.dispatch(action)
    // 生命周期调用ajax
    // axios.get('/api/todolist').then(res=> {
    //   const data = res.data
    //   const action = getInitListAction(data)
    //   store.dispatch(action)
    // })
  }

  handleInputChange (e) {
    // const action = {
    //   type: CHANGE_INPUT_VALUE,
    //   value: e.target.value
    // }
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action)
    // console.log(e.target.value)
  }
  handleBtnClick () {
    // const action = {
    //   type: ADD_TODO_ITEM
    // }
    const action = getAddItemAction();
    store.dispatch(action);
  }

  handleItemDelete (index) {
    // const action = {
    //   type: DELETE_TODO_ITEM,
    //   index
    // }
    const action = getDeleteItemAction(index);
    store.dispatch(action);
  }

  handleStoreChange () {
    // console.log('store changed')
    this.setState(store.getState())
  }


};

export default TodoList;